<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我们 - 朋知云学</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <style>
        .contact-section {
            padding: 60px 0;
        }
        .contact-header {
            text-align: center;
            margin-bottom: 50px;
        }
        .contact-header h1 {
            font-size: 2.5rem;
            color: #2c3e50;
            margin-bottom: 20px;
        }
        .contact-header p {
            font-size: 1.2rem;
            color: #7f8c8d;
            max-width: 800px;
            margin: 0 auto;
        }
        .contact-content {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            margin-bottom: 50px;
        }
        .contact-info {
            flex: 1;
            min-width: 300px;
        }
        .contact-info h2 {
            font-size: 1.8rem;
            color: #2c3e50;
            margin-bottom: 30px;
        }
        .contact-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 25px;
        }
        .contact-item i {
            font-size: 1.5rem;
            color: #5bc0eb;
            margin-right: 15px;
            margin-top: 3px;
        }
        .contact-item-content h3 {
            font-size: 1.2rem;
            color: #2c3e50;
            margin-bottom: 8px;
        }
        .contact-item-content p {
            color: #555;
            line-height: 1.5;
        }
        .contact-form {
            flex: 1;
            min-width: 300px;
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
        }
        .contact-form h2 {
            font-size: 1.8rem;
            color: #2c3e50;
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #2c3e50;
        }
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
            transition: border-color 0.3s;
        }
        .form-control:focus {
            border-color: #5bc0eb;
            outline: none;
        }
        textarea.form-control {
            min-height: 120px;
            resize: vertical;
        }
        .map-section {
            margin-top: 50px;
        }
        .map-section h2 {
            text-align: center;
            margin-bottom: 30px;
            color: #2c3e50;
        }
        .map-container {
            height: 400px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
        }
        .map-placeholder {
            background-color: #f8f9fa;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #7f8c8d;
            font-size: 1.2rem;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header class="navbar">
        <div class="container">
            <div class="logo">
                <img src="../static/avatar1.png" alt="朋知云学">
                <span>朋知云学</span>
            </div>
            <nav class="nav-menu">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="demands.html">支教需求</a></li>
                    <li><a href="ai-assistant.html">AI助手</a></li>
                    <li><a href="user-center.html">用户中心</a></li>
                </ul>
            </nav>
            <div class="user-actions">
                <a href="login.html" class="btn btn-login">登录</a>
                <a href="register.html" class="btn btn-register">注册</a>
            </div>
        </div>
    </header>

    <!-- 联系我们内容 -->
    <section class="contact-section">
        <div class="container">
            <div class="contact-header">
                <h1>联系我们</h1>
                <p>无论您有任何问题、建议或合作意向，我们都期待与您沟通</p>
            </div>
            
            <div class="contact-content">
                <div class="contact-info">
                    <h2>联系方式</h2>
                    
                    <div class="contact-item">
                        <i class="bi bi-envelope"></i>
                        <div class="contact-item-content">
                            <h3>电子邮件</h3>
                            <p>info@pengzhiyunxue.com</p>
                            <p>support@pengzhiyunxue.com（技术支持）</p>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <i class="bi bi-telephone"></i>
                        <div class="contact-item-content">
                            <h3>电话</h3>
                            <p>400-123-4567（工作日 9:00-18:00）</p>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <i class="bi bi-geo-alt"></i>
                        <div class="contact-item-content">
                            <h3>地址</h3>
                            <p>北京市海淀区中关村大街1号</p>
                            <p>朋知云学总部</p>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <i class="bi bi-wechat"></i>
                        <div class="contact-item-content">
                            <h3>微信公众号</h3>
                            <p>朋知云学（pengzhiyunxue）</p>
                        </div>
                    </div>
                </div>
                
                <div class="contact-form">
                    <h2>留言咨询</h2>
                    <form id="contactForm">
                        <div class="form-group">
                            <label for="name">您的姓名</label>
                            <input type="text" id="name" class="form-control" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="email">电子邮箱</label>
                            <input type="email" id="email" class="form-control" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="phone">联系电话</label>
                            <input type="tel" id="phone" class="form-control">
                        </div>
                        
                        <div class="form-group">
                            <label for="subject">主题</label>
                            <select id="subject" class="form-control" required>
                                <option value="">请选择咨询主题</option>
                                <option value="support">支教咨询</option>
                                <option value="cooperation">合作意向</option>
                                <option value="suggestion">意见建议</option>
                                <option value="other">其他问题</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="message">留言内容</label>
                            <textarea id="message" class="form-control" required></textarea>
                        </div>
                        
                        <button type="submit" class="btn btn-primary">提交留言</button>
                    </form>
                </div>
            </div>
            
            <div class="map-section">
                <h2>我们的位置</h2>
                <div class="map-container">
                    <div class="map-placeholder">
                        <p>地图加载中... 或 请启用JavaScript查看地图</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <img src="../static/avatar1.png" alt="朋知云学">
                    <p>朋知云学 - 让支教更简单</p>
                </div>
                <div class="footer-links">
                    <div class="link-group">
                        <h4>关于我们</h4>
                        <ul>
                            <li><a href="about.html">平台介绍</a></li>
                            <li><a href="rules.html">用户守则</a></li>
                            <li><a href="contact.html" class="active">联系我们</a></li>
                        </ul>
                    </div>
                    <div class="link-group">
                        <h4>帮助中心</h4>
                        <ul>
                            <li><a href="tutorial.html">使用教程</a></li>
                            <li><a href="faq.html">常见问题</a></li>
                            <li><a href="feedback.html">意见反馈</a></li>
                        </ul>
                    </div>
                    <div class="link-group">
                        <h4>法律信息</h4>
                        <ul>
                            <li><a href="agreement.html">用户协议</a></li>
                            <li><a href="privacy.html">隐私政策</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 朋知云学. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script src="js/main.js"></script>
    <script>
        // 表单提交处理
        document.getElementById('contactForm').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('感谢您的留言！我们会尽快回复您。');
            this.reset();
        });
        
        // 这里可以添加地图加载代码
        // 例如使用百度地图、高德地图或谷歌地图API
    </script>
</body>
</html>